<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    request.setAttribute("path", path);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="${path}/css/css.css" />
    <link rel="stylesheet" type="text/css" href="${path}/css/style.css" />
    <link rel="stylesheet" type="text/css" href="${path}/css/menu.css" />
    <title>点餐菜单</title>
    <script type="text/javascript"
            src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script
            src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
    <script src="${path}/layer/layer.js" type="text/javascript"></script>
    <script type="text/javascript" src="${path}/js/jquery.fly.min.js" ></script>
    <!-- 兼容IE10 -->
    <script type="text/javascript" src="${path}/js/requestAnimationFrame.js" ></script>
    <script src="${path}/js/main.js" type="text/javascript"></script>
    <script>
        $(document).ready(function() {
            $(".m-main li").click(function() {
                $(".m-main li").removeClass("on");
                $(this).addClass("on");
            });
        });

        function fly(t){
            console.log( $(t).parent().find('img').offset().left)
            var cartLeft = $('#cart_image').offset().left - $(document).scrollTop(); // 获取a标签距离屏幕顶端的距离(因为fly插件的start开始位置是根据屏幕可视区域x，y来计算的，而不是根据整个文档的x，y来计算的)
            var cartTop = $('#cart_image').offset().top; // 获取a标签的y坐标

            var btnLeft = $(t).parent().find('img').offset().left - $(document).scrollTop()+20;
            var btnTop = $(t).parent().find('img').offset().top+20;

            var img = $(t).parent().find('img').attr('src');
            var flyer = $('<img class="u-flyer" src="'+img+'">');
            flyer.fly({
                start: {
                    left: btnLeft,
                    top: btnTop
                },
                end: {
                    left: cartLeft, //结束位置（必填）
                    top: cartTop, //结束位置（必填）
                    width: 0, //结束时宽度
                    height: 0 //结束时高度
                },
                onEnd: function(){ //结束回调
                    this.destory(); //移除dom
                }
            });
            // //每次添加餐品后重置购物车
             getCart();
        }
        //添加餐品到购物车
        function addCart(t,id) {
            if (checkLogin(3)){
                $.get("${path}/CartServlet/addCart?productId="+id,function (data) {
                    console.log(data)
                });
                //添加餐品到购物车动态效果
                fly(t);
            }
        }
    </script>


</head>
<body style="background: #efeee9;">
<input type="hidden" id="pageName" value="customerCenter" />
<input type="hidden" id="morePrivilege" value="false" />
<form id="j-main-form" action="">
<%--头部--%>
<%--    <%@ include file="top.jsp"%>--%>
    <jsp:include page="top.jsp"></jsp:include>
    <div class="m-main" id="container">
        <div class="m-menu fl" style="height: 656px">
            <ul>
                <!-- 菜单 -->
                <c:if test="${requestScope.categoryName==null}">
                    <li class="on" onclick="change(this)">
                        <a href="${path}/ProductServlet/gotoMenu" > 当季特选</a>
                    </li>
                </c:if>
                <c:if test="${requestScope.categoryName!=null}">
                    <li onclick="change(this)">
                        <a href="${path}/ProductServlet/gotoMenu" > 当季特选</a>
                    </li>
                </c:if>
                <c:forEach items="${tCList}" var="tCList" varStatus="i">
                    <c:if test="${requestScope.categoryName ==tCList.categoryName}">
                        <li class="on" id="extId${i.count}" cn="${tCList.categoryName}" en="" >
                            <a href="${path}/ProductServlet/gotoMenu?categoryName=${tCList.categoryName}" name="${tCList.categoryName}">${tCList.categoryName}</a>
                        </li>
                    </c:if>
                    <c:if test="${requestScope.categoryName !=tCList.categoryName}">
                        <li id="extId${i.count}" cn="${tCList.categoryName}" en="" >
                            <a href="${path}/ProductServlet/gotoMenu?categoryName=${tCList.categoryName}" name="${tCList.categoryName}">${tCList.categoryName}</a>
                        </li>
                    </c:if>

                </c:forEach>
            </ul>
        </div>
        <div class="m-menu-content fr" style="position: relative; top: 70px;height: 656px;overflow: auto">
            <!-- 产品列表 -->
            <div style="height: 450px; display: none;"></div>
            <div class="m-product-list">
                <c:forEach items="${tList}" var="list" varStatus="i">
                    <div class="product" condid="0" style="background: #FFF;width: 211px;" >
                        <div class="img cursor">
                            <img src="/show/${list.productPic}" />
                        </div>
                        <div class="title">
                                ${list.productName}
                        </div>
                        <div class="title">
                                ${list.productPrice}$
                        </div>
                        <div class="desc grey">
                        </div>
                        <div class="order j-menu-order" onclick="addCart(this,${list.productId})">
                            <div class="start ui-bgbtn-green" >
                                +
                            </div>
                        </div>
                    </div>
                </c:forEach>

            </div>
            <br>
            <br>
            <br>
            <br>
            <br>

            <!-- /产品列表 -->
        </div>
    </div>
    </div>
    </div>

    <!-- /首页内容区域 -->
    <jsp:include page="foot.jsp"></jsp:include>
    <!-- 购物车-->
    <%
        if(session.getAttribute("user") != null){
    %>
    <%@include file="cart.jsp"%>
    <%
        }
    %>

</form>

</body>
</html>
